<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="/rights">权限管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- plus卡片区域 -->
        <el-card>
            <!-- 表格大边框 -->
            <!-- border：表格边框线，stripe:表格隔行变色  -->
            <el-table :data="rightsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="权限名称" prop="authName"></el-table-column>
                <el-table-column label="路径" prop="path"></el-table-column>
                <el-table-column label="权限等级" prop="level">
                    <!--  作用域插槽  -->
                    <template #default="scope">
                        <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                        <el-tag type="success" v-if="scope.row.level === '1'">二级</el-tag>
                        <el-tag type="warning" v-if="scope.row.level === '2'">三级</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { getRightsListApi } from '@/api/rights'
// 获取权限列表
const rightsList = ref([])
getRightsListApi().then(res => {
    console.log(res)
    rightsList.value = res
})
</script>

<style lang="scss" scoped></style>